<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
         .wrap {
            display: flex;
            border: 1px red solid;
            flex-wrap: wrap;
         } 
        .item {
             height: 200px;
             width: 200px;
             
             border: 1px #ccc solid;
         }
     </style>
</head>
<body>
    <div class="wrap">
        <div class="item show">show</div>
        <button id="show" >show</button>
        <button id="hide" >hide</button>
        <button id="slipeUp" >slipeUp</button>
        <button id="slideDown" >slideDown</button>
        <button id="slideToggle" >slideToggle</button>
        <button id="fadeIn" >fadeIn</button>
        <button id="fadeOut" >fadeOut</button>
        <button id="animate" >animate</button>
    </div>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        $("#show").on("click",function(){
            $(".item.show").show();// 显示
        }) 
        $("#hide").on("click",function(){
            $(".item.show").hide();// 隐藏
        }) 
        $("#slipeUp").on("click",function(){
            $(".item.show").slideUp();// 滑动隐藏
        }) 
        $("#slideDown").on("click",function(){
            $(".item.show").slideDown(); // 滑动显示
        }) 
        $("#slideToggle").on("click",function(){
            $(".item.show").slideToggle(); //  滑动 隐藏显示切换
        }) 
        $("#fadeIn").on("click",function(){
            $(".item.show").fadeIn(); // 渐变显示
        }) 
        $("#fadeOut").on("click",function(){
            $(".item.show").fadeOut(); // 渐变隐藏
        }) 
        $("#animate").on("click",function(){
            $(".item.show").animate({
                opacity: 0.25,
                left: '+=50',
                height: 'toggle'
            }, 5000,); // 动画 传入对应的属性 和 事件 他就会执行
        }) 
    </script>
</body>
</html>